<template>

<div id="app">
  <div class="big">
        <!-- 头部 -->
        <div class="heade">
            <a @click="fn"><img src="../assets/img/教育APP切图/fh.png" alt="" class="im1"></a>
            <div class="heade1">
                <img src="../assets/img/教育APP切图/首页/headpic.png" alt="">
                <h3>菅田将暉</h3>
                <div class="dow">
                    字体成千上万，选择合适的字体很重要的，但它并不容易。今天小编在这里把一些常用的字体归类打包免费提供给大家下载，譬如仿宋gb2312字体、Helvetica字体windows7字体、行书字体大全、60款书法字体打包、叶根友风帆特色字体等。
                </div>
                <p><span class="jc888">教程 888</span><span> 粉丝 888888</span></p>
                <button class="b1" v-show="show" @click="show=0">关注</button>
                <button class="b2" v-show="!show" @click="show=1">已关注</button>
            </div>
            <a href=""> <i class="iconfont icon-fenxiang"></i> </a>
        </div>
        <!-- 身体 -->
        <div class="st">
            <h3 style="font-size:3rem">教程视频</h3>
            <div class="st1">
                <div class="st11">
                    <a href=""><img src="../assets/img/教育APP切图/首页/qhy.png" alt=""></a>
                    <div class="apply">
                        <h3>HTML标签运用</h3>
                        <p>视频时长：36:00</p>
                    </div>
                </div>

            </div>

            <div class="st1">
                <div class="st11">
                    <a href=""><img src="../assets/img/教育APP切图/首页/srqc.png" alt=""></a>
                    <div class="apply">
                        <h3>HTML标签运用</h3>
                        <p>视频时长：36:00</p>
                    </div>
                </div>

            </div>
            <div class="st1">
                <div class="st11">
                    <a href=""><img src="../assets/img/教育APP切图/首页/xzg.png" alt=""></a>
                    <div class="apply">
                        <h3>HTML标签运用</h3>
                        <p>视频时长：36:00</p>
                    </div>
                </div>

            </div>

        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'myTeacher',
  data() {
      return {
          show:1
      }
  },
  components: {
  },
  methods: {
      fn(){
          this.$router.go(-1)
      }
  },
}
</script>
<style lang="scss" scoped>
.heade {
    width: 100%;
    height: 47.3rem;
    background-image: url(../assets/img/教育APP切图/bg_teacher.png);
    background-size: 100% 47.3rem;
    display: flex;
    justify-content: space-around;
    padding: 2rem;
}

.im1 {
    width: 3.6rem;
    height: 2.4rem;
}

.heade a i {
    color: #fff;
}

.heade1 {
    width: 63rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    font-size: 2rem;
    button {
        width: 14.6rem;
        height: 4.2rem;
        border-radius: 5rem;
        font-size: 2rem;
    }
}

.b1 {
    color: #152faa;
    background-image: linear-gradient(#f7ff02, #fafcbd);
}

.b2 {
    background: #f2f2f2;
    // display: none;
}

.heade1 img {
    width: 13rem;
    height: 13rem;
}

.dow {
    font-size: 1.6rem;
}

.jc888 {
    border-right: 0.1rem solid #fff;
}

.heade1 span {
    padding: 0 2rem;
}


/* st */

.st {
    width: 100%;
    background: #f2f2f2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 2rem 0;
    >h3 {
        color: #393737;
        height: 3rem;
        line-height: 3rem;
        padding: 0 2rem;
    }
}

.st1 {
    width: 100%;
    height: 27.5rem;
    display: flex;
    align-items: center;
}

.st11 {
    width: 100%;
    height: 24rem;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
        width: 32.5rem;
        height: 20.1rem;
        border-radius: 2.5rem;
    }
}

.apply {
    width: 37rem;
    height: 100%;
    display: flex;
    font-size: 2rem;
    color: #808080;
    flex-direction: column;
    padding: 2rem 0;
    justify-content: space-between;
    h3 {
        color: #000;
    }
}


  
</style>